<template>
  <div ref="chartBox" class="chart"></div>
</template>

<script setup lang="ts">
import { Line } from '@antv/g2plot';
import { onMounted, ref, watch } from 'vue';
interface Props {
  data: any[];
  isGroup?: boolean;
}
const chartBox = ref();
let lineChart: Line | null = null;
const props = withDefaults(defineProps<Props>(), {});

onMounted(() => {
  initChart();
})

const initChart = () => {
  lineChart?.destroy();
  if(!props.isGroup){
    lineChart = new Line(chartBox.value, {
      data: props.data,
      padding: 'auto',
      xField: 'name',
      yField: 'value',
      seriesField: 'type',
      color: ['#00A554', '#FFBB00'],
      point: {
        size: 3,
        shape: 'circle',
        color: '#ffffff',
        style: (datum: { title: string, name: string, count: number }) => {
          if (datum.name === '订单正品率' || datum.name === '生产合格率') {
            return { stroke: '#00A554' }
          } else {
            return { stroke: '#FFBB00' }
          }
        }
      },
      xAxis: {
        label: {
          style: {
            fontSize: 12,
          },
        },
        tickLine: {
          length: 0
        }
      },
      yAxis: {
        label: {
          formatter: (v: any) =>{
            return `${v}`
          }
        }
      },
      legend: {
        position: 'top',
        itemName: {
          style: {
            fill: '#ffffff',
          },
        },
        marker: {
          symbol: 'circle',
          style: {
            r: 3,
            fill: '#fff'
          }
        }
      },
      tooltip: {
        formatter: (datum: any) => {
          return {
            name: datum.name,
            value: datum.value+'%',//(datum.type == "正品率" ? 
          };
        },
      },
    })
  }else{
    lineChart = new Line(chartBox.value, {
      data: props.data,
      padding: 'auto',
      xField: 'name',
      yField: 'value',
      color: ['#00A554', '#FFBB00'],
      point: {
        size: 3,
        shape: 'circle',
        color: '#ffffff',
        style: (datum: { title: string, name: string, count: number }) => {
          if (datum.name === '订单正品率' || datum.name === '生产合格率') {
            return { stroke: '#00A554' }
          } else {
            return { stroke: '#FFBB00' }
          }
        }
      },
      xAxis: {
        label: {
          style: {
            fontSize: 12,
          },
        },
        tickLine: {
          length: 0
        }
      },
      yAxis: {
        label: {
          formatter: (v: any) =>{ 
            return `${v}`
          }
        }
      },
      legend: {
        position: 'top',
        itemName: {
          style: {
            fill: '#ffffff',
          },
        },
        marker: {
          symbol: 'circle',
          style: {
            r: 3,
            fill: '#fff'
          }
        }
      },
      tooltip: {
        formatter: (datum: any) => {
          return {
            name: datum.name,
            value: datum.value,// + '万',
          };
        },
      },
    })
  }
  lineChart.render();
}
watch(() => props.data, () => {
  //lineChart?.changeData(props.data)
  initChart();
})
</script>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>